<template>
  <el-dialog
    title="选择填报用户"
    :visible="visible"
    width="600px"
    :modal="true"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form :model="filterData" label-width="150px">
      <el-form-item label="所有用户">
        <el-switch
          v-model="filterData.isAllEmp"
          active-text="所有用户"
          inactive-text="部分用户"
        />
      </el-form-item>
      <template v-if="filterData.isAllEmp == false">
        <el-form-item label="选择单位部门">
          <deptSelect
            v-model="deptId"
            :is-multiple="true"
            placeholder="选择单位部门"
            @change="chioseDept"
          />
        </el-form-item>
        <el-form-item label="岗位">
          <treeDicItem
            v-model="filterData.Post"
            :is-multiple="true"
            :dic-id="HrItemDic.post"
            placeholder="岗位"
          />
        </el-form-item>
        <el-form-item label="职务">
          <dictItem
            v-model="filterData.Title"
            :multiple="true"
            :dic-id="HrItemDic.title"
            placeholder="职务"
          />
        </el-form-item>
        <el-form-item label="员工类型">
          <enumItem
            v-model="filterData.UserType"
            :dic-key="HrEnumDic.hrUserType"
            :multiple="true"
            placeholder="员工类型"
          />
        </el-form-item>
      </template>
      <el-row style="text-align: center;">
        <el-button :loading="loading" type="success" @click="save">保存</el-button>
        <el-button :loading="loading" @click="reset">重置</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import deptSelect from '@/components/unit/deptSelect.vue'
import { sync } from '@/OA/api/fillInItem'
import { HrEnumDic, HrItemDic } from '@/config/publicDic'
export default {
  components: {
    deptSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      HrItemDic,
      HrEnumDic,
      loading: false,
      filterData: {
        isAllEmp: true,
        DeptId: null,
        UnitId: null
      },
      deptId: null
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      this.loading = false
      this.filterData = {
        isAllEmp: true,
        DeptId: null,
        UnitId: null,
        Title: null,
        Post: null
      }
      this.deptId = null
    },
    closeForm() {
      this.visible = false
      this.$emit('update:visible', false)
    },
    async save() {
      this.loading = true
      const data = this.format()
      await sync(this.id, data)
      this.closeForm()
      this.$emit('refresh')
    },
    format() {
      if (this.filterData.isAllEmp) {
        return {
          DeptId: null,
          UnitId: null,
          Title: null,
          Post: null
        }
      }
      return {
        DeptId: this.filterData.DeptId,
        UnitId: this.filterData.UnitId,
        Title: this.filterData.Title,
        Post: this.filterData.Post
      }
    },
    chioseDept(e) {
      if (e.value == null || e.value.length === 0) {
        this.filterData.DeptId = null
        this.filterData.UnitId = null
      } else {
        const deptId = []
        const unitId = []
        e.dept.forEach(e => {
          if (e.IsUnit) {
            unitId.push(e.Id)
          } else {
            deptId.push(e.Id)
          }
        })
        this.filterData.DeptId = deptId
        this.filterData.UnitId = unitId
      }
    }
  }
}
</script>
